<template>
  <el-container class="index-container">
    <!-- 头部区域-->
    <el-header>
      <div>
        <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
           @click="isCollapse=!isCollapse"
           style="cursor: pointer"></i>
        <span>文章后台管理系统</span>
      </div>
      <el-dropdown>
        <div class="user-info">
          <img :src="user.photo" alt="">
          <span class="el-dropdown-link">
            {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-setting">设置</el-dropdown-item>
          <el-dropdown-item icon="el-icon-caret-left" @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <!--  侧边栏区域-->
      <el-aside width="auto">
        <index-aside :is-collapse="isCollapse"></index-aside>
      </el-aside>

      <!-- 主题区域-->
      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import IndexAside from './IndexAside'
import { getUserInfoWay } from '../api/login'

export default {
  name: 'Index',
  components: { IndexAside },
  data () {
    return {
      user: {},
      isCollapse: false
    }
  },
  methods: {
    // 获取用户登陆后的信息
    getUser () {
      getUserInfoWay().then(res => {
        this.user = res.data.data
      })
    },
    logout () {
      this.$confirm('您将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.localStorage.removeItem('user')
        this.$router.push('/login')
        this.$message({
          type: 'success',
          message: '退出登录成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style scoped lang="less">
  .el-header {
    background-color: #B3C0D1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .el-aside {
    background-color: #D3DCE6;
  }

  .el-main {
    background-color: #E9EEF3;
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }
</style>
